﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            border: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div style="width:100%;">
        <button onclick="location.href = location.href;" type="button">刷新</button>
    </div>
    <div style="width:100%;">
        <div style="text-align: center; margin-top:20px;margin-bottom:10px; font-size: 20px; letter-spacing: 3px; font-weight: bold; " id="container_title">资金统计情况</div>
        <div id="container" style="height: 440px;width:100%;">
        </div>
    </div>
    <div>
        <!--<div id="container1" style="height:500px;">
        </div>-->
    </div>

    <script src="/Scripts/echarts.js" type="text/javascript"></script>
    <script src="/Scripts/Modal.Child.js" type="text/javascript"></script>

    <script src="/Scripts/jquery.1.11.1.js" type="text/javascript"></script>

    <script type="text/javascript">
        if (typeof window.GetRequest != 'undefined') {
            top.MessageBox.Alert("GetRequest参数 属性名已被占用");
        }
        else {

            window.GetRequest = function (ifObj) {
                if (typeof ifObj == 'boolean') {
                    if (ifObj) {
                        var obj = {};
                        obj.Data = GetRequest();
                        obj.QueryString = function (key) {
                            for (var item in obj.Data) {
                                if (item.toLocaleLowerCase() == key.toLocaleLowerCase()) {
                                    return obj.Data[item];
                                }
                            }
                            return '';
                        }
                        return obj;
                    }
                }
                var url = location.search; //获取url中"?"符后的字串
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            }
        }
    </script>
    <script type="text/javascript">
        $(function () {

            //FORM_SIZE(900, 850);
            BindData();
            //BindData1();

        })
        //初始化折线图
        function BindData() {
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            var option = null;
            var parms = {};
            parms.Type = "Month";
            parms.Data = {};
            parms.Data.ID = GetRequest(true).QueryString("ID");
            if (parms.Data.ID == "") {
                top.MessageBox.Alert("没有接受到参数");
                return;
            }
            option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['计划流入金额', '实际流入金额', '计划流出金额', '实际流出金额']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    name :"金额（万元）",
                    type: 'value'
                },
                series: [
                {
                    name: '计划流入金额',
                    type: 'line',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '实际流入金额',
                    type: 'line',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '计划流出金额',
                    type: 'line',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '实际流出金额',
                    type: 'line',
                    data: [320, 332, 301, 334, 390, 330, 320]
                }]
            }
            $.post("/Module/StatisticalReport/api.ashx", JSON.stringify(parms), function (data) {
                if (!data.Success) {
                    return;
                    top.MessageBox.Alert(data.Meg);
                    return;
                }
                var _data = data.Data;
                $("#container_title").text(data.Entity.N_YEAR + "年" + data.Entity.N_MONTH + "月资金使用情况(单位：万元)");
                //option.title.text = data.Entity.N_YEAR + "年" + data.Entity.N_MONTH + "月资金使用情况(单位：万元)";
                option.xAxis.data = [];
                option.series[0].data = [];
                option.series[1].data = [];
                option.series[2].data = [];
                option.series[3].data = [];

                //                for (var i = 0; i < _data.length; i++) {
                //                    option.series[0].data.push(_data[i].INTO_AMOUNT);
                //                    option.series[1].data.push(_data[i].INTO_USE);
                //                    option.series[2].data.push(_data[i].OUT_AMOUNT);
                //                    option.series[3].data.push(_data[i].OUT_USE);
                //                    option.xAxis.data.push(GetStrs(_data[i].N_WEEK));
                //                }

                for (var i = 1; i < 6; i++) {
                    var bbqit = GetItem(_data, i);

                    if (bbqit == null) {
                        option.series[0].data.push(0);
                        option.series[1].data.push(0);
                        option.series[2].data.push(0);
                        option.series[3].data.push(0);
                    }
                    else {
                        option.series[0].data.push(_data[i-1].INTO_AMOUNT);
                        option.series[1].data.push(_data[i-1].INTO_USE);
                        option.series[2].data.push(_data[i-1].OUT_AMOUNT);
                        option.series[3].data.push(_data[i-1].OUT_USE);
                    }
                    option.xAxis.data.push(GetStrs(i));
                }

                function GetItem(bbq, week) {

                    for (var i = 0; i < bbq.length; i++) {
                        if (bbq[i].N_WEEK == week) {
                            return bbq[i];
                        }
                    }
                    return null;
                }

                myChart.setOption(option);
            });
        }
        function GetStrs(num) {
            switch (num) {
                case 1:
                    return "第一周";
                case 2:
                    return "第二周";
                case 3:
                    return "第三周";
                case 4:
                    return "第四周";
                case 5:
                    return "第五周";
                default:
                    return "";
            }
        }
        //初始化条形图
        function BindData1() {

            var dom = document.getElementById("container1");
            var myChart = echarts.init(dom);
            var app = {};
            var option = null;
            var parms = {};
            parms.Type = "Month";
            parms.Data = {};
            parms.Data.ID = GetRequest(true).QueryString("ID");
            if (parms.Data.ID == "") {
                top.MessageBox.Alert("没有接受到参数");
                return;
            }

            var posList = [
                'left', 'right', 'top', 'bottom',
                'inside',
                'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
            ];

            app.configParameters = {
                rotate: {
                    min: -90,
                    max: 90
                },
                align: {
                    options: {
                        left: 'left',
                        center: 'center',
                        right: 'right'
                    }
                },
                verticalAlign: {
                    options: {
                        top: 'top',
                        middle: 'middle',
                        bottom: 'bottom'
                    }
                },
                position: {
                    options: echarts.util.reduce(posList, function (map, pos) {
                        map[pos] = pos;
                        return map;
                    }, {})
                },
                distance: {
                    min: 0,
                    max: 100
                }
            };

            app.config = {
                rotate: 90,
                align: 'left',
                verticalAlign: 'middle',
                position: 'insideBottom',
                distance: 15,
                onChange: function () {
                    var labelOption = {
                        normal: {
                            rotate: app.config.rotate,
                            align: app.config.align,
                            verticalAlign: app.config.verticalAlign,
                            position: app.config.position,
                            distance: app.config.distance
                        }
                    };
                    myChart.setOption({
                        series: [{
                            label: labelOption
                        }, {
                            label: labelOption
                        }, {
                            label: labelOption
                        }, {
                            label: labelOption
                        }]
                    });
                }
            };

            var labelOption = {
                normal: {
                    show: true,
                    position: app.config.position,
                    distance: app.config.distance,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    rotate: app.config.rotate,
                    formatter: '{c}  {name|{a}}',
                    fontSize: 16,
                    rich: {
                        name: {
                            textBorderColor: '#fff'
                        }
                    }
                }
            };
            option = {
                color: ['#003366', '#006699', '#4cabce', '#e5323e'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['计划流入金额', '实际流入金额', '计划流出金额', '实际流出金额']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: ['2012', '2013', '2014', '2015', '2016']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                {
                    name: '计划流入金额',
                    type: 'bar',
                    label: labelOption,
                    data: [320, 332, 301, 334, 390]
                },
                {
                    name: '实际流入金额',
                    type: 'bar',
                    label: labelOption,
                    data: [220, 182, 191, 234, 290]
                },
                {
                    name: '计划流出金额',
                    type: 'bar',
                    label: labelOption,
                    data: [150, 232, 201, 154, 190]
                },
                {
                    name: '实际流出金额',
                    type: 'bar',
                    label: labelOption,
                    data: [98, 77, 101, 99, 40]
                }
                ]
            };
            $.post("/Module/StatisticalReport/api.ashx", JSON.stringify(parms), function (data) {
                if (!data.Success) {
                    return;
                    top.MessageBox.Alert(data.Meg);
                    return;
                }
                var _data = data.Data;
                //option.title.text = data.Entity.N_YEAR + "年" + data.Entity.N_MONTH + "月资金使用情况(单位：万元)";
                option.xAxis[0].data = [];
                option.series[0].data = [];
                option.series[1].data = [];
                option.series[2].data = [];
                option.series[3].data = [];
                for (var i = 0; i < _data.length; i++) {
                    option.series[0].data.push(_data[i].USER_AMOUNT_INTO);
                    option.series[1].data.push(_data[i].USER_AMOUNT_INTO_ACTUAL);
                    option.series[2].data.push(_data[i].USER_AMOUNT_OUT);
                    option.series[3].data.push(_data[i].USER_AMOUNT_OUT_ACTUAL);
                    option.xAxis[0].data.push(GetStrs(_data[i].N_WEEK));
                }
                console.log(option.xAxis.data);
                myChart.setOption(option);
            });
        }
    </script>
</body>
</html>